<template> 
    <!-- 列表    -->
    <el-table   
        :data="permissionData || []" 
        border stripe 
        :header-cell-style="{background:'#eee'}"   
        row-key="id"
        :expand-row-keys="expandKeys"
    > 
        <el-table-column prop="name" label="名称"  />
        <el-table-column prop="code" label="功能权限值" align="center" />
        <el-table-column prop="toCode" label="跳转路由权限值"  align="center"/> 
        <el-table-column label="操作" align="center">
            <template #default="scope" >
                <el-button 
                    type="success" size="small" 
                    @click="addPer(scope.row)" 
                    :disabled="scope.row.level>=4" 
                >添加</el-button>
                <el-button 
                    type="primary" size="small" 
                    @click="" 
                    :disabled="scope.row.level===1"
                >修改</el-button>
                <el-button 
                    type="danger" size="small" 
                    @click="" 
                    :disabled="scope.row.level===1"
                >删除</el-button> 
            </template>
        </el-table-column>
    </el-table> 

    <el-dialog v-model="dialogFormVisible" title="添加菜单">
        <el-form :model="permission" ref="ruleFormRef" :rules="rules"  label-width="120px">
            <el-form-item label="父级名称" v-if="permission.level>2 ">
                <el-input :value="permission.pname"  disabled/>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="permission.name"/>
            </el-form-item> 
            <el-form-item label="功能权限值" prop="code">
                <el-input v-model="permission.code"/>
            </el-form-item> 
            <el-form-item label="跳转路由权限值" prop="toCode" v-if="permission.level===4">
                <el-input v-model="permission.toCode"/>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="resetForm(ruleFormRef)">关闭</el-button>
            <el-button type="primary" @click="preserve">
            提交
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
    import {ref,reactive, nextTick} from 'vue'
    import {permissionList,addPerm} from '@/api'
    import type { FormInstance, FormRules } from 'element-plus'
    const ruleFormRef = ref<FormInstance>()
    const permissionData = ref<any>([])
    const expandKeys = ref<any>([])
    let dialogFormVisible = ref(false)
    const permission = reactive({ // 要操作的菜单权限对象
        level: 0,
        name: '',
        code: '',
        toCode: '',
        pname:'',
        pid:'',
        type:null,
    })
    const rules = reactive<FormRules>({
        name: [  { required: true, message: '不能为空', trigger: 'blur' }, ],
        code: [ { required: true, message: '不能为空', trigger: 'blur' }, ],
    })
    // let 
    // 获取数据
    function getPerData(){
        permissionList().then((res) => {
            // console.log(res.data.children); 
            permissionData.value.push(res.data.children[0])
            expandKeys.value.push(res.data.children[0].id)
        }).catch((err) => {
            console.log(err);  
        });
    }
    getPerData()
    // 新建菜单 保存
    function addPer(row){ 
        nextTick(()=>{ if(ruleFormRef.value) ruleFormRef.value.resetFields() }) 
        permission.level = row.level+1 
        permission.pname = row.name 
        permission.pid = row.pid 
        permission.type = permission.level===4 ? 2 : 1
        dialogFormVisible.value = true
        
    }
    // {"level":4,"name":"测试功能01","code":"Afunction","toCode":"","pid":"1333330152781561858","type":2}
    function preserve(){ 
        const {level,name,code,toCode,pid,type} = permission
        let data = {level,name,code,toCode,pid,type} 
        
    }
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

</script>

<style lang='less' scoped>

</style>